import { Button, Card, Checkbox, Dialog, FloatingBubble, Footer, Toast } from 'antd-mobile';
import { NavBar } from 'antd-mobile';
import './main.css';
import { AddOutline } from 'antd-mobile-icons';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { CardData } from '../../types/dataType';
import { useDispatch, useSelector } from 'react-redux';
import { listSlice } from '../../redux/slice/listSlice';

function Main() {
  const navigate = useNavigate();
  const [multipleVisible, setMultipleVisible] = useState(false);
  const right = (
    <div style={{ fontSize: 24 }}>
      {multipleVisible && (
        <Button
          size="mini"
          color="danger"
          onClick={() => {
            deleteMultiple();
          }}
        >
          删除
        </Button>
      )}
      <Button
        size="mini"
        color="primary"
        onClick={() => {
          setMultipleVisible(!multipleVisible);
          setSelectedIds([]);
        }}
      >
        {!multipleVisible ? '多选' : '取消'}
      </Button>
    </div>
  );

  const listData = useSelector((state: { list: CardData[] }) => state.list);
  const dispatch = useDispatch();
  const add = () => {
    navigate('/upsert');
  };
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const deleteMultiple = () => {
    dispatch(listSlice.actions.multipleDelete({ ids: selectedIds }));
  };
  return (
    <>
      <NavBar right={right} back={null}>
        备忘录
      </NavBar>
      <div className="main-container">
        {listData.map((card) => (
          <Card
            key={card.id}
            title={card.title}
            extra={
              <div onClick={(e) => e.stopPropagation()}>
                {!multipleVisible ? (
                  <Button
                    size="mini"
                    color="danger"
                    onClick={() => {
                      Dialog.show({
                        content: '是否删除',
                        closeOnAction: true,
                        actions: [
                          [
                            {
                              key: 'cancel',
                              text: '取消'
                            },
                            {
                              key: 'delete',
                              text: '删除',
                              bold: true,
                              danger: true,
                              onClick() {
                                dispatch(listSlice.actions.delete({ id: card.id }));
                                Toast.show('删除成功');
                              }
                            }
                          ]
                        ]
                      });
                    }}
                  >
                    删除
                  </Button>
                ) : (
                  <Checkbox
                    style={{
                      '--icon-size': '18px',
                      '--font-size': '14px',
                      '--gap': '6px'
                    }}
                    onChange={(checked) => {
                      if (checked) {
                        setSelectedIds((prev) => [...prev, card.id]);
                      } else {
                        setSelectedIds((prev) => prev.filter((id) => id !== card.id));
                      }
                    }}
                  >
                    选中删除
                  </Checkbox>
                )}
              </div>
            }
            onClick={() => {
              navigate(`/upsert/${card.id}`);
            }}
            className="card-item"
          >
            {card.content}
          </Card>
        ))}
      </div>
      <Footer content="@ LeeYa Developed"></Footer>
      <FloatingBubble
        style={{
          '--initial-position-bottom': '48px',
          '--initial-position-right': '24px',
          '--edge-distance': '24px'
        }}
        onClick={add}
      >
        <AddOutline fontSize={32} />
      </FloatingBubble>
    </>
  );
}

export default Main;
